import { createUseStyles } from "react-jss";

interface Props {
  fontSize: number;
}

export default createUseStyles({
  strinInput: {
    width: "232px",
    height: "24px",
    borderRadius: "4px",
    border: "1px solid #D9D9D9",
    fontSize: (props: Props) => props.fontSize,
    color: "#333",
    overflow: "hidden",
    display: "flex",
  },
  input: {
    paddingLeft: "5px",
    border: 0,
    lineHeight: "24px",
    flexGrow: 1,
    "&::placeholder": {
      color: "#C5C5C5",
    },
    "&:hover": { borderColor: "#0B71BB" },
    "&:focus-visible": { borderColor: "#0B71BB", outline: 0 },
  },
  invalid: {
    border: "1px solid #C55252",
  },
  disabled: {
    color: "#999",
    cursor: "not-allowed",
  },
  units: {
    width: "55px",
    flexShrink: 0,
    borderRadius: 0,
    background: "rgb(245, 245, 245)",
    border: 0,
    borderLeft: "1px solid rgb(217, 217, 217)",
  },
  prefixAndSubfix: {
    background: "#F5F5F5",
    padding: "0 10px",
    lineHeight: "24px",
    minWidth: "45px",
    textAlign: "center",
  },
  prefix: {
    borderRight: "1px solid  #D9D9D9",
  },
  suffix: {
    borderLeft: "1px solid  #D9D9D9",
  },
});
